import React from 'react';
import {useDnD} from '../DnDContext.tsx';

const Sidebar = () => {
    const [, setType] = useDnD();

    const onDragStart = (event: React.DragEvent<HTMLDivElement>, nodeType: string) => {
        if (setType) {
            setType({
                data: undefined, type: nodeType
            });
        }
        event.dataTransfer.effectAllowed = 'move';
    };

    return (
        <div className={"flex flex-col  bg-gray-500 p-2 rounded-sm gap-2"}>
            <div>您可以拖动这些节点到右侧的面板中。</div>
            <div className="p-2 bg-pink-600 rounded-md" onDragStart={(event) => onDragStart(event, 'InputNode')}
                 draggable>
                输入组件
            </div>

            <div className="p-2 bg-amber-600 rounded-md" onDragStart={(event) => onDragStart(event, 'TextNode')}
                 draggable>
                文本组件
            </div>
        </div>
    );
};


export const SidebarDemo1 = () => {
    const [, setType] = useDnD();

    const onDragStart = (event: React.DragEvent<HTMLDivElement>, nodeType: string) => {
        if (setType) {
            setType({
                data: undefined, type: nodeType
            });
        }
        event.dataTransfer.effectAllowed = 'move';
    };

    return (
        <div className={"flex flex-row items-center justify-start w-[400px] p-4 rounded-md bg-pink-600 gap-2"} style={{
            position: "absolute",
            top: 10
        }}>

            <div className={"pl-4 pr-4 pt-2 pb-2 bg-blue-400 rounded-md cursor-move"}
                 onDragStart={(event) => onDragStart(event, "TextNode")} draggable>
                Text Node
            </div>

            <div className={"pl-4 pr-4 pt-2 pb-2 bg-blue-400 rounded-md cursor-move"}
                 onDragStart={(event) => onDragStart(event, "InputNode")} draggable>
                Input Node
            </div>

        </div>
    );
}

export default Sidebar;

